//引入输出模块
const path = require('path');
//引入HtmlWebpackPlugin包
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入MiniCssExtractPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//引入复制插件
const CopyWebpackPlugin = require('copy-webpack-plugin');


const config = {
    //mode是打包模式：development|production|none
    mode: 'development',
    //输入
    //单入口
    // entry: './src/abc.js',
    //多入口
    entry: {
        // index: './src/js/index.js',
        // reg: './src/js/reg.js',
        manageLogin: './src/manage/js/login.js',
        mainIndex: './src/manage/js/main.js',
        menuIndex: './src/manage/js/menu.js',
        manageAddNews: './src/manage/js/addNews.js',
        manageNews: './src/manage/js/manageNews.js',
        manageMine: './src/manage/js/mine.js',

        /**
         * users文件夹入口
         */
        usersIndex: './src/users/js/index.js',
        usersLogin: './src/users/js/login.js',
        usersReg: './src/users/js/reg.js'
    },
    //输出
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'js/[name]_bundle_[id].js',
        clean: true,//表示每次编译前，先清空输入文件夹
    },
    //
    plugins: [
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/manage/login.html',
            //生成的文件名，默认是index.html
            filename: 'manage/login.html',
            chunks: ['manageLogin']//表示当前文件要使用的入口名称。
        }),

        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/manage/index.html',
            //生成的文件名，默认是index.html
            filename: 'manage/index.html',
            chunks: []//表示当前文件要使用的入口名称。
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/manage/menu.html',
            //生成的文件名，默认是index.html
            filename: 'manage/menu.html',
            chunks: ['menuIndex']//表示当前文件要使用的入口名称。
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/manage/main.html',
            //生成的文件名，默认是index.html
            filename: 'manage/main.html',
            chunks: ['mainIndex']//表示当前文件要使用的入口名称。
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/manage/addNews.html',
            //生成的文件名，默认是index.html
            filename: 'manage/addNews.html',
            chunks: ['manageAddNews']//表示当前文件要使用的入口名称。
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/manage/manageNews.html',
            //生成的文件名，默认是index.html
            filename: 'manage/manageNews.html',
            chunks: ['manageNews']//表示当前文件要使用的入口名称。
        }),
        /**
         * users文件的html
         */
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/users/index.html',
            //生成的文件名，默认是index.html
            filename: 'users/index.html',
            chunks: ['usersnIndex']//表示当前文件要使用的入口名称。
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/users/login.html',
            //生成的文件名，默认是index.html
            filename: 'users/login.html',
            chunks: ['usersnLogin']//表示当前文件要使用的入口名称。
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/users/reg.html',
            //生成的文件名，默认是index.html
            filename: 'users/reg.html',
            chunks: ['usersnReg']//表示当前文件要使用的入口名称。
        }),
        // new HtmlWebpackPlugin({
        //     //设置生成的html主文件的模板地址。
        //     //在模板文件中插入对新生成的js文件的引用。
        //     template: './src/manage/personalCenter.html',
        //     //生成的文件名，默认是index.html
        //     filename: 'manage/personalCenter.html',
        //     chunks: ['managePersonalCenter']//表示当前文件要使用的入口名称。
        // }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址。
            //在模板文件中插入对新生成的js文件的引用。
            template: './src/manage/mine.html',
            //生成的文件名，默认是index.html
            filename: 'manage/mine.html',
            chunks: ['manageMine']//表示当前文件要使用的入口名称。
        }),
        //css配置
        new MiniCssExtractPlugin({
            //生成的文件名及路径
            filename: 'css/[main_[name]].css'
        }),
        //复制文件过去dist
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: './src/images',
                    to: 'images'
                }
            ]
        })
    ],
    //引入css模块规则
    module: {
        rules: [
            {
                test: /\.(css|sass|less|scss)$/,
                // 使用的模块是按照数组下标从大到小的顺序（从后向前使用）
                // css-loader只负责将样式写入js文件，在html文件被浏览器打开时，由js文件负责将样式写入html文件的内部样式表中
                // 坏处：因为是动态写入，所以，如果需要写入的样式比较多，有可能会造成页面闪烁
                // use: ['style-loader', 'css-loader']
                use: [MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2//从这里加载的来自于import的css文件向前再使用一级loader处理
                    }
                },
                {//兼容性
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                [
                                    'postcss-preset-env'
                                ],
                            ],
                        },
                    },
                },//兼容性
                    // 'sass-loader'
                ]
            },
            {//处理js兼容性
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env' //使用这个预设，会根据浏览器来选择插件转化ES5
                            ]
                        }
                    }
                ]
            },
            // {
            //     test: /\.(jpg|png|gif|jpeg)$/,
            //     type: 'asset/resource',
            //     generator: {
            //         filename: 'images/[name][ext]'
            //     }
            // }
            {//方式二，自动判断小于多少kb放行内图片
                test: /\.(jpg|png|gif|jpeg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 50 * 1024
                    }
                },
                generator: {
                    filename: 'images/[name][ext]'
                }
            },
            {//字体图标配置
                test: /\.ttf$/,
                type: 'asset/resource',
                generator: {
                    filename: 'font_icon/[name][id][ext]'
                }
            },
            {//引入html文件
                test: /\.txt$/,
                type: 'asset/source'
            }

        ]

    },
    //优化
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
            '...'
        ],
    },

    //热更新
    devServer: {
        //端口号
        port: 3000,
        //开启热更新
        hot: 'only',
        //打开服务器时自动开启浏览器访问
        open: true,
        //监控变化的文件的，被监控的文件只要发生变化，就会重新编译，自动刷新浏览器。
        watchFiles: ['./src/manage/index.html',
            './src/manage/login.html',
            './src/manage/main.html',
            './src/manage/menu.html',
            './src/manage/mine.html',
            './src/manage/addNews.html',
            './src/manage/manageNews.html',
            /**
             * users文件下的监控
             */
            './src/users/index.html',
            './src/users/login.html',
            './src/users/reg.html',
        ],
        static: {
            //设置express服务器的根目录。
            directory: path.join(__dirname, 'dist'),
        },

        //服务器拦截请求
        // proxy: {
        //     //拦截以下地址开头的地址
        //     '/api': {
        //         //真实地址转到以下地址
        //         target: "http://127.0.0.1",
        //         //替换
        //         pathRewrite: { "^/api": "/new/addNews" },
        //         changeOrigin: true
        //     }
        // }
        ///api/users/reg
        proxy: {
            '/api': {
                target: "http://127.0.0.1",
                pathRewrite: { "^/api": "" },
                changeOrigin: true
            }
        }
    }
}

module.exports = config;

